<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>根据学号查询学生信息 - 学生信息管理系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0FC6C2',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        gray: {
                            50: '#F5F7FA',
                            100: '#E5E6EB',
                            200: '#C9CDD4',
                            300: '#86909C',
                            400: '#4E5969',
                            500: '#272E3B',
                            600: '#1D2129',
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .btn-hover {
                @apply transition-all duration-300 hover:shadow-lg transform hover:-translate-y-0.5;
            }
            .form-focus {
                @apply focus:ring-2 focus:ring-primary/30 focus:border-primary focus:outline-none;
            }
            .field-label {
                @apply block text-sm font-medium text-gray-600 mb-1;
            }
            .field-value {
                @apply text-gray-600 font-medium;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans min-h-screen">
    <!-- 导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <div class="flex items-center space-x-3">
                <i class="fa fa-graduation-cap text-primary text-2xl"></i>
                <h1 class="text-xl font-bold text-gray-600">学生信息管理系统</h1>
            </div>
            <nav class="hidden md:flex items-center space-x-8">
                <a href="index.html" class="text-gray-400 hover:text-primary transition-colors">首页</a>
                <a href="all-students.html" class="text-gray-400 hover:text-primary transition-colors">全部学生</a>
                <a href="student-by-id.html" class="text-primary font-medium">ID查询</a>
                <a href="students-by-status.html" class="text-gray-400 hover:text-primary transition-colors">状态查询</a>
                <a href="students-by-name.html" class="text-gray-400 hover:text-primary transition-colors">姓名查询</a>
                <a href="update-student.html" class="text-gray-400 hover:text-primary transition-colors">信息更新</a>
            </nav>
            <button class="md:hidden text-gray-500">
                <i class="fa fa-bars text-xl"></i>
            </button>
        </div>
    </header>

    <!-- 主要内容 -->
    <main class="container mx-auto px-4 py-8">
        <div class="mb-8">
            <div class="flex items-center space-x-3 mb-2">
                <a href="index.html" class="text-gray-400 hover:text-primary transition-colors">
                    <i class="fa fa-home"></i>
                </a>
                <i class="fa fa-angle-right text-gray-300 text-xs"></i>
                <span class="text-gray-400">学号查询</span>
            </div>
            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-600">根据学号查询学生信息</h2>
            <p class="text-gray-400">通过输入学生ID，查询特定学生的详细信息</p>
        </div>

        <!-- 查询表单 -->
        <div class="bg-white rounded-xl p-6 card-shadow mb-8">
            <form id="queryForm" class="space-y-4">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="space-y-2">
                        <label for="studentId" class="field-label">
                            <span class="text-danger">*</span> 学生ID
                        </label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400">
                                <i class="fa fa-id-card"></i>
                            </span>
                            <input 
                                type="text" 
                                id="studentId" 
                                name="studentId" 
                                placeholder="请输入学生ID" 
                                required
                                class="w-full pl-10 pr-4 py-2.5 border border-gray-200 rounded-lg form-focus"
                            >
                        </div>
                        <p class="text-xs text-gray-400">请输入完整的学生ID进行精确查询</p>
                    </div>
                </div>
                
                <div class="pt-4 flex flex-wrap gap-4">
                    <button type="submit" class="px-6 py-2.5 bg-primary text-white rounded-lg font-medium flex items-center btn-hover">
                        <i class="fa fa-search mr-2"></i>查询学生信息
                    </button>
                    <button type="reset" class="px-6 py-2.5 bg-gray-100 text-gray-600 rounded-lg font-medium flex items-center hover:bg-gray-200 transition-colors">
                        <i class="fa fa-refresh mr-2"></i>重置
                    </button>
                    <button type="button" id="viewAllBtn" class="px-6 py-2.5 bg-gray-100 text-gray-600 rounded-lg font-medium flex items-center hover:bg-gray-200 transition-colors">
                        <i class="fa fa-list mr-2"></i>查看全部
                    </button>
                </div>
            </form>
        </div>

        <!-- 结果展示区 -->
        <div id="resultSection" class="mb-8 hidden">
            <div class="bg-white rounded-xl p-6 card-shadow mb-6">
                <div class="flex justify-between items-start mb-6">
                    <div>
                        <h3 class="text-lg font-semibold text-gray-600 mb-1">学生详细信息</h3>
                        <p class="text-sm text-gray-400">查询时间：<span id="queryTime"></span></p>
                    </div>
                    <div class="flex items-center space-x-3">
                        <button id="printBtn" class="px-3 py-1.5 bg-gray-100 text-gray-600 rounded text-sm font-medium hover:bg-gray-200 transition-colors">
                            <i class="fa fa-print mr-1"></i>打印
                        </button>
                        <button id="exportBtn" class="px-3 py-1.5 bg-gray-100 text-gray-600 rounded text-sm font-medium hover:bg-gray-200 transition-colors">
                            <i class="fa fa-download mr-1"></i>导出
                        </button>
                        <button id="editBtn" class="px-3 py-1.5 bg-warning text-white rounded text-sm font-medium btn-hover">
                            <i class="fa fa-edit mr-1"></i>编辑
                        </button>
                    </div>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                    <!-- 基本信息卡片 -->
                    <div class="border border-gray-100 rounded-lg p-5 bg-gray-50">
                        <h4 class="text-base font-medium text-gray-600 mb-4 flex items-center">
                            <i class="fa fa-user-circle text-primary mr-2"></i>基本信息
                        </h4>
                        
                        <div class="space-y-4">
                            <div class="grid grid-cols-3 gap-2">
                                <span class="field-label col-span-1">学生ID</span>
                                <span class="field-value col-span-2" id="resultStudentId"></span>
                            </div>
                            
                            <div class="grid grid-cols-3 gap-2">
                                <span class="field-label col-span-1">姓名</span>
                                <span class="field-value col-span-2" id="resultName"></span>
                            </div>
                            
                            <div class="grid grid-cols-3 gap-2">
                                <span class="field-label col-span-1">性别</span>
                                <span class="field-value col-span-2" id="resultGender"></span>
                            </div>
                            
                            <div class="grid grid-cols-3 gap-2">
                                <span class="field-label col-span-1">状态</span>
                                <span class="col-span-2" id="resultStatus"></span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 学习信息卡片 -->
                    <div class="border border-gray-100 rounded-lg p-5 bg-gray-50">
                        <h4 class="text-base font-medium text-gray-600 mb-4 flex items-center">
                            <i class="fa fa-book text-primary mr-2"></i>学习信息
                        </h4>
                        
                        <div class="space-y-4">
                            <div class="grid grid-cols-3 gap-2">
                                <span class="field-label col-span-1">班级</span>
                                <span class="field-value col-span-2" id="resultClassName"></span>
                            </div>
                            
                            <div class="grid grid-cols-3 gap-2">
                                <span class="field-label col-span-1">专业</span>
                                <span class="field-value col-span-2" id="resultMajor"></span>
                            </div>
                            
                            <div class="grid grid-cols-3 gap-2">
                                <span class="field-label col-span-1">创建时间</span>
                                <span class="field-value col-span-2" id="resultCreateTime"></span>
                            </div>
                            
                            <div class="grid grid-cols-3 gap-2">
                                <span class="field-label col-span-1">更新时间</span>
                                <span class="field-value col-span-2" id="resultUpdateTime"></span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 联系方式卡片 -->
                <div class="border border-gray-100 rounded-lg p-5 bg-gray-50">
                    <h4 class="text-base font-medium text-gray-600 mb-4 flex items-center">
                        <i class="fa fa-address-book text-primary mr-2"></i>联系方式
                    </h4>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="space-y-4">
                            <div class="grid grid-cols-3 gap-2">
                                <span class="field-label col-span-1">手机号码</span>
                                <span class="field-value col-span-2" id="resultPhone"></span>
                            </div>
                        </div>
                        
                        <div class="space-y-4">
                            <div class="grid grid-cols-3 gap-2">
                                <span class="field-label col-span-1">电子邮箱</span>
                                <span class="field-value col-span-2" id="resultEmail"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 操作按钮 -->
            <div class="flex justify-center space-x-4">
                <button id="newQueryBtn" class="px-6 py-2.5 bg-primary text-white rounded-lg font-medium flex items-center btn-hover">
                    <i class="fa fa-search-plus mr-2"></i>进行新查询
                </button>
                <a href="index.html" class="px-6 py-2.5 bg-gray-100 text-gray-600 rounded-lg font-medium flex items-center hover:bg-gray-200 transition-colors">
                    <i class="fa fa-home mr-2"></i>返回首页
                </a>
            </div>
        </div>
        
        <!-- 初始提示 -->
        <div id="initialPrompt" class="bg-white rounded-xl p-10 card-shadow text-center">
            <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary/10 text-primary mb-4">
                <i class="fa fa-search text-2xl"></i>
            </div>
            <h3 class="text-lg font-semibold text-gray-600 mb-2">请输入学生ID进行查询</h3>
            <p class="text-gray-400 max-w-md mx-auto">输入完整的学生ID，系统将为您展示该学生的详细信息，包括基本信息、学习信息和联系方式。</p>
        </div>
        
        <!-- 错误提示 -->
        <div id="errorMessage" class="bg-white rounded-xl p-8 card-shadow text-center hidden">
            <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-danger/10 text-danger mb-4">
                <i class="fa fa-exclamation-circle text-2xl"></i>
            </div>
            <h3 class="text-lg font-semibold text-gray-600 mb-2">未找到学生信息</h3>
            <p class="text-gray-400 max-w-md mx-auto mb-6" id="errorDetails"></p>
            <button id="retryBtn" class="px-6 py-2.5 bg-primary text-white rounded-lg font-medium flex items-center btn-hover mx-auto">
                <i class="fa fa-refresh mr-2"></i>重新查询
            </button>
        </div>
        
        <!-- 加载提示 -->
        <div id="loadingIndicator" class="bg-white rounded-xl p-8 card-shadow text-center hidden">
            <div class="inline-block animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-primary mb-4"></div>
            <h3 class="text-lg font-semibold text-gray-600 mb-2">正在查询</h3>
            <p class="text-gray-400">请稍候，系统正在检索学生信息...</p>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white mt-12 py-6 border-t border-gray-100">
        <div class="container mx-auto px-4 text-center text-gray-400 text-sm">
            <p>© 2023 学生信息管理系统 - 版权所有</p>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 表单元素
            const queryForm = document.getElementById('queryForm');
            const studentIdInput = document.getElementById('studentId');
            
            // 结果展示区域
            const resultSection = document.getElementById('resultSection');
            const initialPrompt = document.getElementById('initialPrompt');
            const errorMessage = document.getElementById('errorMessage');
            const loadingIndicator = document.getElementById('loadingIndicator');
            const errorDetails = document.getElementById('errorDetails');
            
            // 按钮
            const newQueryBtn = document.getElementById('newQueryBtn');
            const retryBtn = document.getElementById('retryBtn');
            const viewAllBtn = document.getElementById('viewAllBtn');
            const printBtn = document.getElementById('printBtn');
            const exportBtn = document.getElementById('exportBtn');
            const editBtn = document.getElementById('editBtn');
            
            // 结果字段
            const resultFields = {
                studentId: document.getElementById('resultStudentId'),
                name: document.getElementById('resultName'),
                gender: document.getElementById('resultGender'),
                status: document.getElementById('resultStatus'),
                className: document.getElementById('resultClassName'),
                major: document.getElementById('resultMajor'),
                createTime: document.getElementById('resultCreateTime'),
                updateTime: document.getElementById('resultUpdateTime'),
                phone: document.getElementById('resultPhone'),
                email: document.getElementById('resultEmail'),
                queryTime: document.getElementById('queryTime')
            };
            
            // 检查URL参数，支持从其他页面带ID跳转
            const urlParams = new URLSearchParams(window.location.search);
            const studentIdParam = urlParams.get('id');
            if (studentIdParam) {
                studentIdInput.value = studentIdParam;
                queryForm.dispatchEvent(new Event('submit'));
            }
            
            // 表单提交事件
            queryForm.addEventListener('submit', function(e) {
                e.preventDefault();
                const studentId = studentIdInput.value.trim();
                
                if (!studentId) {
                    showError('请输入学生ID');
                    return;
                }
                
                fetchStudentById(studentId);
            });
            
            // 事件监听器
            newQueryBtn.addEventListener('click', resetForm);
            retryBtn.addEventListener('click', function() {
                errorMessage.classList.add('hidden');
                initialPrompt.classList.remove('hidden');
                studentIdInput.focus();
            });
            
            viewAllBtn.addEventListener('click', function() {
                window.location.href = 'all-students.html';
            });
            
            printBtn.addEventListener('click', function() {
                window.print();
            });
            
            exportBtn.addEventListener('click', function() {
                const studentId = resultFields.studentId.textContent;
                alert(`导出学生 ${studentId} 的信息功能尚未实现`);
            });
            
            editBtn.addEventListener('click', function() {
                const studentId = resultFields.studentId.textContent;
                window.location.href = `update-student.html?id=${studentId}`;
            });
            
            // 重置表单
            function resetForm() {
                queryForm.reset();
                resultSection.classList.add('hidden');
                errorMessage.classList.add('hidden');
                initialPrompt.classList.remove('hidden');
                studentIdInput.focus();
            }
            
            // 显示加载状态
            function showLoading() {
                initialPrompt.classList.add('hidden');
                resultSection.classList.add('hidden');
                errorMessage.classList.add('hidden');
                loadingIndicator.classList.remove('hidden');
            }
            
            // 显示错误
            function showError(message) {
                errorDetails.textContent = message || '未找到匹配的学生信息，请检查ID是否正确';
                loadingIndicator.classList.add('hidden');
                resultSection.classList.add('hidden');
                initialPrompt.classList.add('hidden');
                errorMessage.classList.remove('hidden');
            }
            
            // 格式化时间
            function formatDate(dateString) {
                if (!dateString) return '-';
                
                const date = new Date(dateString);
                if (isNaN(date.getTime())) return '-';
                
                const year = date.getFullYear();
                const month = String(date.getMonth() + 1).padStart(2, '0');
                const day = String(date.getDate()).padStart(2, '0');
                const hours = String(date.getHours()).padStart(2, '0');
                const minutes = String(date.getMinutes()).padStart(2, '0');
                const seconds = String(date.getSeconds()).padStart(2, '0');
                
                return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            }
            
            // 获取学生信息
            function fetchStudentById(studentId) {
                showLoading();
                
                fetch(`/getStudentById/${studentId}`)
                    .then(response => {
                        if (!response.ok) {
                            throw new Error(`HTTP error! Status: ${response.status}`);
                        }
                        return response.json();
                    })
                    .then(data => {
                        if (!data || Object.keys(data).length === 0) {
                            throw new Error('未找到该学生的信息');
                        }
                        
                        // 填充结果字段
                        resultFields.studentId.textContent = data.studentId || '-';
                        resultFields.name.textContent = data.name || '-';
                        resultFields.gender.textContent = data.gender || '-';
                        
                        // 状态显示
                        const statusSpan = document.createElement('span');
                        if (data.status === 1) {
                            statusSpan.className = 'px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-success/10 text-success';
                            statusSpan.textContent = '正常';
                        } else {
                            statusSpan.className = 'px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-danger/10 text-danger';
                            statusSpan.textContent = '已删除';
                        }
                        resultFields.status.innerHTML = '';
                        resultFields.status.appendChild(statusSpan);
                        
                        resultFields.className.textContent = data.className || '-';
                        resultFields.major.textContent = data.major || '-';
                        resultFields.createTime.textContent = formatDate(data.createTime);
                        resultFields.updateTime.textContent = formatDate(data.updateTime);
                        resultFields.phone.textContent = data.phone || '-';
                        resultFields.email.textContent = data.email || '-';
                        
                        // 设置查询时间
                        resultFields.queryTime.textContent = formatDate(new Date().toISOString());
                        
                        // 显示结果
                        loadingIndicator.classList.add('hidden');
                        resultSection.classList.remove('hidden');
                        
                        // 平滑滚动到结果区域
                        resultSection.scrollIntoView({ behavior: 'smooth' });
                    })
                    .catch(error => {
                        console.error('获取学生信息失败:', error);
                        showError(error.message);
                    });
            }
            
            // 添加输入框验证和交互效果
            studentIdInput.addEventListener('focus', function() {
                if (errorMessage.classList.contains('hidden') === false) {
                    errorMessage.classList.add('hidden');
                    initialPrompt.classList.remove('hidden');
                }
            });
            
            studentIdInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    queryForm.dispatchEvent(new Event('submit'));
                }
            });
            
            // 自动聚焦输入框
            studentIdInput.focus();
        });
    </script>
</body>
</html>